# React Bridge Overview

`@module-federation/bridge-react` is a powerful micro-frontend solution designed specifically for React applications. By providing cross-framework rendering and routing coordination capabilities, you can easily export and load React applications or modules as standalone applications.

## Core Features

### Basic Capabilities
- **🚀 Application-level Module Export**: Use `createBridgeComponent` to wrap complete React applications as remotely loadable modules
- **📦 Application-level Module Loading**: Seamlessly integrate remote React applications in host applications through `createRemoteAppComponent`
- **🎯 Component-level Lazy Loading**: Support `createLazyComponent` for fine-grained component-level lazy loading

### Features
- **🔄 Cross-framework Rendering**: Support cross-framework rendering between different frameworks (React, Vue, Angular, etc.)
- **🛣️ Routing Coordination**: Automatically handle React Router basename injection and routing context passing
- **🔗 Version Compatibility**: Full support for React 16-19, automatically handling rendering differences and lifecycle across versions
- **⚡ Data Prefetch**: Built-in resource data prefetch mechanism, supporting application, component, and dependency prefetch optimization

### Why This Matters?

- **Progressive Upgrade**: Allow different teams to upgrade React versions at their own pace
- **Zero-disruption Integration**: New and legacy applications can work together seamlessly without synchronized upgrades
- **Technical Debt Management**: Avoid integration issues caused by version inconsistencies
- **Team Autonomy**: Each team can independently choose the most suitable React version

## Smart Version Adaptation

React Bridge provides flexible import methods, allowing users to choose appropriate implementations based on their React version:

```tsx
// Use when explicitly specifying version
import { createBridgeComponent } from '@module-federation/bridge-react'; // React 16/17
import { createBridgeComponent } from '@module-federation/bridge-react/18'; // React 18
import { createBridgeComponent } from '@module-federation/bridge-react/19'; // React 19
```

### 💡 Examples
[Complete Examples](https://github.com/module-federation/core/tree/main/apps/router-demo) - Complete micro-frontend project containing multiple React applications
